<template>
  <div class="login">
    <div class="login-content">
      <el-form ref="form" :rules="loginRules" :model="user" label-width="60px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="user.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item class="form-btn">
          <el-button type="primary" @click="loginForm">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
       <!-- <p v-for="item in getMenuRoutes" :key="item">{{item}}</p> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import {login, getMenus} from "../../api/index";
import {mixinsData} from "../../utils/mixins"

export default {
  name: "Login",
  mixins:[mixinsData],
  data() {
    return {
      user:{
        username:"",
        password:""
      },
      loginRules:{
        username:[
          {required:true,message:"账号必填",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码必填",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    // 重置表单
    resetForm(){
      this.$refs.form.resetFields()
    },
    // 登录操作
    loginForm(){
       this.$refs.form.validate((valid) => {
          if (valid) {
            login(this.user).then(res => {
              if(res.meta.status == 400){
                this.$message.error(res.meta.msg)
              }else{
                this.$message.success(res.meta.msg)
                // 登录成功在本地将token存起来，方便后期使用
                localStorage.setItem("token",res.data.token)
                this.setMenuList().then(()=>{
                  this.$router.push("/layout/welcome")
                })        
              }
            })
          } else {
            return false;
          }
        });
    }
  }
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: #0000a3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-content {
  width: 500px;
  height: 300px;
  background: #fff;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form{
  width: 100%;
}
.form-btn{
  display: flex;
  justify-content: center;
}
</style>